<template>
<!--    <div>-->
<!--       <el-card>-->
<!--         <h1 style="text-align:center">数据展示</h1>-->
<!--         <div style="height:50px;line-height:50px;margin-bottom: 20px;">-->
<!--            <div style="float: left">选择年份</div>-->
<!--            <el-date-picker v-model="fileYear" type="year" placeholder="选择年">-->
<!--            </el-date-picker>-->
<!--         </div>-->
<!--         <div style="margin-bottom: 20px">-->
<!--           <el-button @click="qiehuan()" :class="active==1?'active':''">按月份</el-button>-->
<!--           <el-button @click="qiehuan2()" :class="active==2?'active':''">按季度</el-button>-->
<!--         </div>-->
<!--         <el-table-->
<!--           :data="tableData"-->
<!--           :row-style="{height:'56px'}"-->
<!--           style="width: 100%">-->
<!--           <el-table-column-->
<!--               v-for="(item,index) in (active==1?tableLabel:tableLabel2)"-->
<!--               :key="index"-->
<!--               :align="item.align"-->
<!--               :prop="item.prop"-->
<!--               :label="item.label"-->
<!--           >-->
<!--           </el-table-column>-->
<!--         </el-table>-->

<!--       </el-card>-->
<!--    </div>-->
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box">
        <el-form>
          <el-col :span="5">
            <el-form-item label="选择年份">
              <el-date-picker v-model="fileYear" type="year" placeholder="选择年">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button @click="qiehuan()" :class="active==1?'active':''">按月份</el-button>
            <el-button @click="qiehuan2()" :class="active==2?'active':''">按季度</el-button>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="tableContainer">
          <el-table
            :data="tableData"
            :row-style="{height:'56px'}"
            style="width: 100%">
            <el-table-column
              v-for="(item,index) in (active==1?tableLabel:tableLabel2)"
              :key="index"
              :align="item.align"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                fileYear:'2022',
                active:1,
                buttonList:['按月份','按季度'],
                tableData:[{
                    name :'净利润（元）',
                    Jan : '21.17亿',
                    Feb:'12亿',
                    Mar:'12亿',
                    Apr:'13亿',
                    May:'14亿',
                    June:'15亿',
                    July:'16亿',
                    Aug:'17亿',
                    Sep:'18亿',
                    Oct:'19亿',
                    Nov:'18亿',
                    Dec:'19亿',
                },{
                    name :'净利润同比增长率',
                    Jan : '21.17亿',
                    Feb:'12亿',
                    Mar:'12亿',
                    Apr:'13亿',
                    May:'14亿',
                    June:'15亿',
                    July:'16亿',
                    Aug:'17亿',
                    Sep:'18亿',
                    Oct:'19亿',
                    Nov:'18亿',
                    Dec:'19亿',
                },{
                    name :'扣非净利润(元)',
                    Jan : '21.17亿',
                    Feb:'12亿',
                    Mar:'12亿',
                    Apr:'13亿',
                    May:'14亿',
                    June:'15亿',
                    July:'16亿',
                    Aug:'17亿',
                    Sep:'18亿',
                    Oct:'19亿',
                    Nov:'18亿',
                    Dec:'19亿',
                },{
                    name :'扣非净利润同比增长率',
                    Jan : '21.17亿',
                    Feb:'12亿',
                    Mar:'12亿',
                    Apr:'13亿',
                    May:'14亿',
                    June:'15亿',
                    July:'16亿',
                    Aug:'17亿',
                    Sep:'18亿',
                    Oct:'19亿',
                    Nov:'18亿',
                    Dec:'19亿',
                },{
                    name :'营业总收入（元）',
                    Jan : '21.17亿',
                    Feb:'12亿',
                    Mar:'12亿',
                    Apr:'13亿',
                    May:'14亿',
                    June:'15亿',
                    July:'16亿',
                    Aug:'17亿',
                    Sep:'18亿',
                    Oct:'19亿',
                    Nov:'18亿',
                    Dec:'19亿',
                },{
                    name :'每股指标（元）',
                    Jan : '0.12',
                    Feb:'0.22',
                    Mar:'0.1',
                    Apr:'1.1',
                    May:'0.2',
                    June:'0.15',
                    July:'0.15',
                    Aug:'0.15',
                    Sep:'0.15',
                    Oct:'0.15',
                    Nov:'0.15',
                    Dec:'0.15',
                },{
                name :'每股净产值（元）',
                    Jan : '21.17',
                    Feb:'12',
                    Mar:'12',
                    Apr:'13',
                    May:'14',
                    June:'15',
                    July:'16',
                    Aug:'17',
                    Sep:'18',
                    Oct:'19',
                    Nov:'18',
                    Dec:'19',
            },{
                    name :'营业总收入（元）',
                    Jan : '21.17亿',
                    Feb:'12亿',
                    Mar:'12亿',
                    Apr:'13亿',
                    May:'14亿',
                    June:'15亿',
                    July:'16亿',
                    Aug:'17亿',
                    Sep:'18亿',
                    Oct:'19亿',
                    Nov:'18亿',
                    Dec:'19亿',
                },{
                    name :'每股经营现金流（元）',
                    Jan : '21.17',
                    Feb:'12',
                    Mar:'12',
                    Apr:'13',
                    May:'14',
                    June:'15',
                    July:'16',
                    Aug:'17',
                    Sep:'18',
                    Oct:'19',
                    Nov:'18',
                    Dec:'19',
                },{
                    name :'每股末分配利润（元）',
                    Jan : '21.17',
                    Feb:'12',
                    Mar:'12',
                    Apr:'13',
                    May:'14',
                    June:'15',
                    July:'16',
                    Aug:'17',
                    Sep:'18',
                    Oct:'19',
                    Nov:'18',
                    Dec:'19',
                },{
                    name :'每股资本公积金（元）',
                    Jan : '21.17',
                    Feb:'12',
                    Mar:'12',
                    Apr:'13',
                    May:'14',
                    June:'15',
                    July:'16',
                    Aug:'17',
                    Sep:'18',
                    Oct:'19',
                    Nov:'18',
                    Dec:'19',
                },{
                    name :'每股资本公积金（元）',
                    Jan : '21.17',
                    Feb:'12',
                    Mar:'12',
                    Apr:'13',
                    May:'14',
                    June:'15',
                    July:'16',
                    Aug:'17',
                    Sep:'18',
                    Oct:'19',
                    Nov:'18',
                    Dec:'19',
                }
                ],
                tableLabel:[{
                   label:'科目\\年度',
                    prop:'name',
                    align:"left"
                },{
                    label:'1月',
                    prop:'Jan',
                    align:"right"
                },{
                    label:'2月',
                    prop:'Feb',
                    align:"right"
                },{
                    label:'3月',
                    prop:'Mar',
                    align:"right"
                },{
                    label:'4月',
                    prop:'Apr',
                    align:"right"
                },{
                    label:'5月',
                    prop:'May',
                    align:"right"
                },{
                    label:'6月',
                    prop:'June',
                    align:"right"
                },{
                    label:'7月',
                    prop:'July',
                    align:"right"
                },{
                    label:'8月',
                    prop:'Aug',
                    align:"right"
                },{
                    label:'9月',
                    prop:'Sep',
                    align:"right"
                },{
                    label:'10月',
                    prop:'Oct',
                    align:"right"
                },{
                    label:'11月',
                    prop:'Nov',
                    align:"right"
                },{
                    label:'12月',
                    prop:'Dec',
                    align:"right"
                }
                ],
                tableLabel2:[
                    {
                        label:'科目\\年度',
                        prop:'name',
                        align:"left"
                    },{
                        label:'第一季度',
                        prop:'Jan',
                        align:"right"
                    },{
                        label:'第二季度',
                        prop:'Feb',
                        align:"right"
                    },{
                        label:'第三季度',
                        prop:'Mar',
                        align:"right"
                    },{
                        label:'第四季度',
                        prop:'Apr',
                        align:"right"
                    }
                ]
            }
        },
        methods:{
            qiehuan(){
                this.active =1
            },
            qiehuan2(){
                this.active =2
            }
        }
    }
</script>

<style scoped lang="scss">
  .JNPF-common-layout {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: calc(100vh - 84px);
    background: #f7f9fb;
  .JNPF-common-layout-center {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  /*padding: 20px;*/

  .JNPF-common-search-box {
    background: #fff;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    /*margin-bottom: 16px;*/
    padding: 15px 21px 0;
    border-radius: 4px;
  }
  .JNPF-flex-main{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 4px;
  }
  .JNPF-common-layout-main {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
  }
  .JNPF-flex-main .el-table {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  }
  }
  .tableContainer {
    -webkit-box-flex: .9;
    -ms-flex: .9 0 0px;
    flex: .9 0 0;
    height: 100%;
    overflow: hidden;
    padding:0px 21px 2px;
  }
  .pagination-container{
    /*background: #fff;*/
    text-align: right;
    overflow: auto hidden;
    margin-top: 10px;
    padding-right: 10px;
    height:50px;
  }
  ::v-deep .el-form-item .el-input{
    width:241px;
  }
  ::v-deep .el-table__fixed{
    height:100% !important;
  }
  .active {
    color: #000;
    transition: all .8s;
    background: #1682e6;
    color: #fff;
  }
</style>
